<template>
	<view class="user-logistics">
		<view class="user-logistics-list" v-if="logisticsList.length">
			<view class="user-logistics-item" v-for="(data,index) in logisticsList" :key="index">
				<view class="user-logistics-item-name">{{data.company_name}}</view>
				<view class="user-logistics-item-start">
					<view class="start-icon"><image src="https://master.shengejiaju.cn/web/static/icons/icon_start@2x.png"></image></view>
					<view class="start-name"><text>{{data.start_consignee}}</text><text>{{data.start_mobile}}</text></view>
					<view class="start-address">
						<text>{{data.start_province}}</text>
						<text>{{data.start_city}}</text>
						<text>{{data.start_district}}</text>
						<text>{{data.start_address}}</text>
					</view>
					<view class="start-edit" @click="edit(data.address_id)"><image src="https://master.shengejiaju.cn/web/static/icons/icon_edit.png"></image></view>
				</view>
				<view class="user-logistics-item-end">
					<view class="start-icon"><image src="https://master.shengejiaju.cn/web/static/icons/icon_end@2x.png"></image></view>
					<view class="start-name"><text>{{data.end_consignee}}</text><text>{{data.end_mobile}}</text></view>
					<view class="start-address">
						<text>{{data.end_province}}</text>
						<text>{{data.end_city}}</text>
						<text>{{data.end_district}}</text>
						<text>{{data.end_address}}</text>
					</view>
					<view class="start-edit" @click="del(data.address_id)"><image src="https://master.shengejiaju.cn/web/static/icons/icon_del@2x.png"></image></view>
				</view>
			</view>
		</view>
		<nothing :text="'还未添加地址'" @goUrl="edit()" :btnTxt="'去添加物流'" v-else></nothing>
		<view class="user-logistics-btn" v-if="logisticsList.length">
			<text @click="edit()">新增物流地址</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logisticsList: []
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.init()
		},
		methods: {
			init(){
				this.$api.LogisticsList().then(res => {
					this.logisticsList = res.datas.data
				})
			},
			edit(address_id){
				if(address_id){
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/my/user-logistics/user-logistics-form?address_id=' + address_id
					})
				}else{
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/my/user-logistics/user-logistics-form'
					})
				}
			},
			del(address_id){
				uni.showModal({
					title: '温馨提示',
					content: '删除后不可恢复，是否确认删除？',
					success: (confirm) => {
						if(confirm.confirm){
							this.$api.LogisticsDel({address_id: address_id}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '删除成功'
								})
								setTimeout(() => {
									this.init()
								},1500)
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
		padding-bottom: 120rpx;
	}
	.user-logistics-list{
		padding-top: 1rpx;
	}
	.user-logistics-item{
		background-color: #FFF;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 4rpx;
		.user-logistics-item-name{
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			font-size: 32rpx;
			border-bottom: solid 2rpx #F5F5F5;
		}
		.user-logistics-item-start{
			position: relative;
			padding: 0 90rpx;
			&::before{
				content: '';
				position: absolute;
				width: 1rpx;
				height: 170rpx;
				border-right: dotted 4rpx #888;
				left: 20rpx;
				top: 50%;
			}
			.start-icon{
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				image{
					width: 48rpx;
					height: 60rpx;
				}
			}
			.start-name{
				text{
					margin-right: 30rpx;
					font-weight: bold;
					font-size: 32rpx;
				}
			}
			.start-address{
				font-size: 28rpx;
				color: #4D4D4D;
				margin-top: 25rpx;
			}
			.start-edit{
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				image{
					width: 25rpx;
					height: 25rpx;
				}
			}
		}
		.user-logistics-item-end{
			position: relative;
			padding: 0 90rpx;
			margin-top: 60rpx;
			.start-icon{
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				image{
					width: 48rpx;
					height: 60rpx;
				}
			}
			.start-name{
				text{
					margin-right: 30rpx;
					font-weight: bold;
					font-size: 32rpx;
				}
			}
			.start-address{
				font-size: 28rpx;
				color: #4D4D4D;
				margin-top: 25rpx;
			}
			.start-edit{
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				image{
					width: 25rpx;
					height: 25rpx;
				}
			}
		}
	}
	.user-logistics-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background-color: #FFF;
		display: flex;
		align-items: center;
		border-top: solid 2rpx #EEE;
		text{
			flex: 1;
			display: block;
			height: 90rpx;
			line-height: 90rpx;
			margin: 0 75rpx;
			background-color: #2073f5;
			color: #FFF;
			font-size: 32rpx;
			text-align: center;
			border-radius: 8rpx;
		}
	}
</style>
